import './css/huodong.css'
import { Carousel } from 'antd'
import { useEffect, useState } from 'react'
import { gethgjhd } from '../api/api'
import { useNavigate } from 'react-router-dom'
import { PickerView } from 'antd-mobile'
import { basicColumns, basicColumns2 } from './columns-data'
import { useLocation } from 'react-router-dom'
import {  getUser2Djm, AddUserDjm} from '../api/api'

const contentStyle = {
  margin: 0,
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
}

const list = [
  {
    id: 1,
    img: 'http://127.0.0.1:7001/public/swiper/lunbo.png',
  },
  {
    id: 2,
    img: 'http://127.0.0.1:7001/public/swiper/lunbo.png',
  },
]

function GetDateStr(AddDayCount) {
  var dd = new Date()
  dd.setDate(dd.getDate() + AddDayCount) //获取AddDayCount天后的日期
  var y = dd.getFullYear() //获取当前年份的日期
  var m = dd.getMonth() + 1 //获取当前月份的日期
  var d = dd.getDate() //获取当前天数的日期
  var h = dd.getHours() //获取当前小时数
  var mm = dd.getMinutes() //获取当前分钟数
  var s = dd.getSeconds() //获取当前描述
  if (d >= 10) {
    return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s
  } else {
    return y + '-' + m + '-0' + d + ' ' + h + ':' + mm + ':' + s
  }
}

const tablist = [
  { id: 1, title: '今天' },
  { id: 2, title: '明天' },
  { id: 3, title: '后天' },
]

let user = sessionStorage.getItem('user')

function HuoDong() {
  let [users, setusers] = useState([])
  const navigate = useNavigate()
  const [current, setCurrent] = useState(0)
  const [isshow, setisshow] = useState(false)
  const [tisshow, settisshow] = useState(false)
  const [tisshow1, settisshow1] = useState(false)
  let { state } = useLocation()
  useEffect(() => {
    getUser2Djm(user).then((res) => {
      setusers(res.data)
    })
    fn()
  }, [])

  const [value, setValue] = useState([])
  const [value1, setValue1] = useState([])

  function fn(){
    gethgjhd().then((res) => {
      let data = res.data.map((v) => {
        let n = v.hdtimes.split(' ')[0]
        let t = GetDateStr(0).split(' ')[0]
        let m = GetDateStr(1).split(' ')[0]
        let h = GetDateStr(2).split(' ')[0]
        if (
          Number(new Date(`${n} 00:00:00`)) == Number(new Date(`${t} 00:00:00`))
        ) {
          v.tabtitle = '今天'
        } else if (
          Number(new Date(`${n} 00:00:00`)) == Number(new Date(`${m} 00:00:00`))
        ) {
          v.tabtitle = '明天'
        } else if (
          Number(new Date(`${n} 00:00:00`)) == Number(new Date(`${h} 00:00:00`))
        ) {
          v.tabtitle = '后天'
        } else {
          v.tabtitle = '过去'
        }
        return v
      })
      tablist[0].tabarr = data.filter((v) => v.tabtitle == '今天')
      tablist[1].tabarr = data.filter((v) => v.tabtitle == '明天')
      tablist[2].tabarr = data.filter((v) => v.tabtitle == '后天')
    })
  }

  return (
    <div className="huodong">
      <div className="huodong_title">彩活动</div>
      <div className="huodong_swiper">
        <Carousel autoplay>
          {list.map((item, index) => {
            return (
              <div key={item.id}>
                <h3 style={contentStyle}>
                  <img className="image" src={item.img} />
                </h3>
              </div>
            )
          })}
        </Carousel>
      </div>
      <button onClick={()=>{
        let obj = {
          author:users.img ? users.img : '',
          username:users.userName,
          hdtypes:value.join(''),
          hdtimes:'2023-09-20 19:00:00',
          jieshao:state.jieshao,
          hdtilte:state.jieshao1,
          bmpeople:'[{"img":"https://inews.gtimg.com/newsapp_bt/0/14136123315/1000","user":"xxx_jc"}]'
        }

        AddUserDjm(obj).then(res=>{
          console.log(res);
        })
        
      }}>发布</button>
      <div
        className="huodong_zj"
        style={{ display: !isshow ? 'block' : 'none' }}
      >
        <div className="huodong_left"></div>
        <div className="huodong_context">
          <div
            className="content_rido"
            onClick={() => {
              setisshow(true)
            }}
          >
            组局
          </div>
        </div>
        <div className="huodong_right"></div>
      </div>
      <div
        className="huodong_zj1"
        style={{ display: isshow ? 'block' : 'none' }}
      >
        <div className="tabit">
          <div className="huodong_left1">
            <div
              className="left1"
              onClick={() => {
                settisshow(true)
              }}
            >
              <img
                className="left1_imgae"
                src="http://127.0.0.1:7001/public/lvxing.png"
              />
            </div>
            <span className="left1_wz">{value}</span>
          </div>

          <div className="huodong_left1">
            <div
              className="left1"
              onClick={() => {
                settisshow1(true)
              }}
            >
              <img
                className="left1_imgae"
                src="http://127.0.0.1:7001/public/lvxing.png"
              />
            </div>
            <span className="left1_wz">{value1}</span>
          </div>

          <div className="huodong_left1">
            <div
              className="left1"
              onClick={()=>{
                navigate('/jieshao')
             }}
            >
              <img
                className="left1_imgae"
                src="http://127.0.0.1:7001/public/lvxing.png"
              />
            </div>
            <span className="left1_wz">介绍</span>
          </div>
        </div>
      </div>
      {/* 弹出层 */}
      {tisshow && (
        <div
          className="hgj_huod_tan"
          onClick={() => {
            settisshow(false)
          }}
        >
          <div
            style={{ width: '90%', height: '200px', background: '#fff' }}
            onClick={(e) => {
              e.stopPropagation()
            }}
          >
            <div className="tanchuang">
              <div className="tanchuang1">
                <div className="tanchuang1_left">选择类型</div>
                <div className="tanchuang1_right" onClick={()=>{
                  settisshow(false)
                }}>确定</div>
              </div>
              <div>
                <PickerView
                  columns={basicColumns}
                  value={value}
                  onChange={(val, extend) => {
                    setValue(val)
                    console.log('onChange', val, extend.items)
                  }}
                />
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 弹出层1 */}
      {tisshow1 && (
        <div
          className="hgj_huod_tan"
          onClick={() => {
            settisshow1(false)
          }}
        >
          <div
            style={{ width: '90%', height: '200px', background: '#fff' }}
            onClick={(e) => {
              e.stopPropagation()
            }}
          >
            <div className="tanchuang">
              <div className="tanchuang1">
                <div className="tanchuang1_left">选择时间</div>
                <div className="tanchuang1_right" onClick={()=>{
                  settisshow1(false)
                }}>确定</div>
              </div>
              <div>
               
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="huodong_kong"></div>
      <ul className="huodong_tab">
        {tablist.map((item, index) => {
          return (
            <li
              key={index}
              className="tab_li"
              style={{ color: current == index ? '#FFBB10' : '#000' }}
              onClick={() => {
                setCurrent(index)
              }}
            >
              {item.title}
            </li>
          )
        })}
      </ul>
      <div className="newsList">
        {tablist[current]?.tabarr?.map((v,index) => {
          return (
            <div
              className="tab"
              key={index}
              onClick={() => {
                navigate('/huodongdetail', {
                  state: {
                    id: v.id,
                  },
                })
              }}
            >
              <div className="tab_left">
                <img className="left_img" src={v.author} />
              </div>
              <div className="tab_right">
                <div className="right_wz">
                  <p>{v.username}</p>
                  <p>{v.hdtimes}</p>
                  <p>{v.jieshao}</p>
                </div>
                <div className="right_1">
                  <div className='right_1_img'>
                      <img className='hgj-img' src={v.icon}/>
                  </div>
                  <span className='hgj_name'>{v.hdtypes}</span>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
export default HuoDong
